<ion-header>
  <ion-toolbar>
    <ion-button (click)="router.back()" fill="clear" slot="start">
      <ion-icon slot="start" name="chevron-back-outline"></ion-icon>
    </ion-button>
    <ion-title>小说搜索</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-searchbar
    placeholder="请输入小说名或作者名"
    style="margin-top:10px"
    inputmode="decimal"
    type="decimal"
    [debounce]="250"
    (ionChange)="onSearchChange($event)"
  >
  </ion-searchbar>
  <ng-container *ngIf="res; else bar">
    <ng-container
      *ngIf="res.results.length==0 || res.results.length==69; else elseTemplate"
    >
      <ion-list *ngIf="banner">
        <h5
          align="center"
          style="color: gray;"
          [ngClass]="{'hidden': res.results.length!==0 }"
        >
          抱歉，搜索没有结果^_^
        </h5>
        <h2 style="margin-left: 1rem;font-weight: bold;">热门小说推荐</h2>
        <ion-grid fixed>
          <ion-row>
            <ion-col
              size="6"
              *ngFor="let item of banner.results; let i=index"
              [routerLink]="['/phdetail',{title:item.title}]"
              style="text-align: center;"
            >
              <div>
                <img
                  [src]="item.cover"
                  alt=""
                  style="width: 5em;border-radius: 0.2em;margin: 0.5em;"
                />
                <p style="margin-top: -0.1em;">{{item.title}}</p>
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-list>
    </ng-container>
    <ng-template #elseTemplate>
      <ion-item
        *ngFor="let item of res.results; let i=index"
        style="border-bottom: 1px solid #999;"
        [routerLink]="['/phdetail',{title:item.title}]"
      >
        <img
          [src]="item.cover"
          alt=""
          style="width: 5em;border-radius: 0.2em;margin: 0.5em;"
        />

        <ion-label>
          <h2 style="margin-top: -0.1em;">{{item.title}}</h2>
          <p style="font-size: 0.7em;color: gray;">
            {{item.author}} | {{item.majorCate}} | {{item.minorCate}}
          </p>
          <h3>{{item.shortIntro}}</h3>
        </ion-label>
      </ion-item>
    </ng-template>
  </ng-container>
  <ng-template #bar>
    <ion-list *ngIf="banner">
      <h2 style="margin-left: 1rem;font-weight: bold;">热门小说推荐</h2>
      <ion-grid fixed>
        <ion-row>
          <ion-col
            size="6"
            *ngFor="let item of banner.results; let i=index"
            [routerLink]="['/phdetail',{title:item.title}]"
            style="text-align: center;"
          >
            <div>
              <img
                [src]="item.cover"
                alt=""
                style="width: 5em;border-radius: 0.2em;margin: 0.5em;"
              />
              <p style="margin-top: -0.1em;">{{item.title}}</p>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-list>
  </ng-template>
</ion-content>
